<template>
  <div class="cartDetail">
    <div class="content">
      <van-checkbox-group v-model="checked"
                          @change="groupChange">
        <div v-for="(item,index) in store.state.cartList"
             :key="index">
          <ListItem :item="item"
                    :handleChange="handleChange"
                    :showCheckBox="true" />
        </div>
      </van-checkbox-group>
    </div>
    <van-submit-bar class="submit-all"
                    :price="allPrice"
                    button-text="结算"
                    @submit="onSubmit"
                    button-color="#ffc400"
                    v-if="store.state.isDelete">
      <van-checkbox v-model="data.submitChecked"
                    checked-color="#ffc400"
                    @click="choseAll">全选</van-checkbox>

    </van-submit-bar>
    <div class="buy" v-else>
      <div class="letf">
        <van-checkbox v-model="data.submitChecked"
                      checked-color="#ffc400"
                      @click="choseAll">全选</van-checkbox>
      </div>
      <div class="delete" @click="handleDelete">删除</div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { useStore } from 'vuex'
import ListItem from '@/components/ListItem.vue'
import { showToast } from "vant";
import { useRouter } from "vue-router";
const props = defineProps({
  // 因为props传不了函数
  changeShow:Function
})
const store = useStore()
const router = useRouter()
const data = reactive({
  checked: [],
  submitChecked: true,
})
const handleChange = (value, dalete) => {
  store.state.cartList.map((item) => {
    if (item.id === dalete.name) {
      item.num = value
    }
  })
}
const { checked } = toRefs(data)
const init = () => {
  data.checked = store.state.cartList.map((item) => item.id)
}

const onSubmit = () => {
  if (data.checked.length) {
    store.commit('pay',updataData())
    router.push({
      path:'/createdorder',
      query:{
        list:data.checked
      }
    })
  }else{
    showToast('请选择要结算的商品');
  }
}
const choseAll = () => {
  if (data.checked.length !== store.state.cartList.length) {
    init()
  } else {
    data.checked = []
  }
}
const groupChange = (result) => {
  // console.log(result);
  if (result.length === store.state.cartList.length) {
    data.submitChecked = true
  } else {
    data.submitChecked = false
  }
  data.checked = result
}
const allPrice = computed(() => {
  let countList = updataData()
  let sum = 0
  countList.forEach((item) => {
    sum += item.num * item.price
  })
  return sum * 100
})
const updataData=(type)=>{
  return store.state.cartList.filter((item) => {
    return type==='dalete'?!data.checked.includes(item.id):data.checked.includes(item.id)
  })
}
const handleDelete=()=>{
  if (data.checked.length) {
    store.commit('dalete',updataData('dalete'))
    data.checked=[]
    if (!store.state.cartList.length) {
    store.commit('edit', 'delete')
    }
  }else{
    showToast('请选择要删除的商品')
  }
}
onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.cartDetail {
  font-size: 14px;
  flex: 1;
  position: relative;
  overflow-y: auto;
  padding: 20px 20px 55px;
  .submit-all {
    position: fixed;
    bottom: 46px;
  }

  .buy {
    position: fixed;
    bottom: 48px;
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    height: 50px;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    .left {
      display: flex;
      align-items: center;
    }
    .delete {
      color: #fff;
      background-color: #ffc400;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      width: 110px;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  }

  .content {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
  }
}
</style>